import {onMounted, ref} from 'vue'
import {CardInstance, FormInstance} from 'element-plus'
export const useCardHeight = () => {
  const card = ref<CardInstance>()
  const height = ref<number>(0)
  const form = ref<FormInstance>()
  const div = ref<HTMLDivElement>()

  onMounted(() => {
    if (card.value && div.value) {
      const resize = new ResizeObserver((entries, observer) => {
        entries.forEach((entry) => {
          height.value = card.value?.$el.offsetHeight - entry.target.offsetHeight - 100
          // console.log(  )
        })
        // console.log(entries)
      })
      resize.observe(div.value!)

      // console.log()
      // console.log(div.value?.offsetHeight)
      // height.value = card.value?.$el.offsetHeight - div.value?.offsetHeight - 100
      // console.log(height.value)
    }
  })



  return {
    card,
    height,
    form,
    div
  }
}
